<template>
  <view class="whe_maxv" style="background-color: #f8faf7">
    <view v-if="status === 1" class="whe_max boxs xd" style="padding: 20px;">
      <view class="wh_f_l">
        <view class="fz_20 em">商品评价</view>
        <view>
          <text @click="allHp" class="bor_25 pad_5_10 fz_14" style="background-color: #d5f0dd;color: #3a9e5f">一键好评</text>
        </view>
      </view>
      <!--    主体-->
      <view class="ba_white xyy pad_10 bor_10" style="margin: 15px 0" v-for="(item,index) in list">
        <view class="wh_f_r" :key="index">
          <view style="width: 60px">
            <view class="img_zfx"><image :src="item.goods_image" style="border-radius: 10px"></image></view>
          </view>
          <view class="wh_f_l pad_l-10">
            <view class="fz_14">
              <view class="wz_black em fz_16 ccsl_2">{{item.goods_name}}</view>
              <view class="wz_hui">{{item.goods?.specs}}</view>
              <view class="wz_hui">
                <view class="disp">
                  <text v-if="!item.isTrue" @click="addZk(index)">展开</text>
                  <text v-if="item.isTrue" @click="addSq(index)">收起</text>
                  <image :class="!item.isTrue?'xz180':'xz0'" class="centerdq  mag_l-5" src="../img/gd.png" style="width: 12px;height: 6px;"></image>
                </view>
              </view>
            </view>
            <view class="jz_flex wz_jz" style="width: 80px;">
              <view class="wh_max">
                <view class="wh_f fz_12">
                  <view class="flex_1">
                    <img @click="addhp(1,index)" v-if="item?.ishp" class="centerdq" src="../img/hp.png" style="width: 24px;height: 24px"/>
                    <img @click="addhp(3,index)" v-if="!item?.ishp" class="centerdq" src="../img/hp_1.png" style="width: 24px;height: 24px"/>
                  </view>
                  <view class="flex_1">
                    <img @click="addhp(2,index)" v-if="item?.iscp" class="centerdq" src="../img/cp.png" style="width: 24px;height: 24px"/>
                    <img @click="addhp(4,index)" v-if="!item?.iscp" class="centerdq" src="../img/cp_1.png" style="width: 24px;height: 24px"/>
                  </view>
                </view>
                <view class="wh_f fz_12 wz_jz">
                  <view class="flex_1">好评</view>
                  <view class="flex_1">差评</view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="" v-if="item.isTrue" style="border-top: 1px solid #f7f8f6">
          <!--        标签-->
          <view class="fz_14 pad_10_0 ">
            <view v-if="item?.ishp" @click="addbq(1,index,indexs)" class="disp mag_b_5"
                  :class="items.isTrue?'xz':'bxz'"
                  style="padding: 2px 5px;border-radius: 5px;margin-right: 10px"
                  v-for="(items,indexs) in item.hpList" :key="indexs">{{items.name}}
            </view>
            <view v-if="item?.iscp" @click="addbq(2,index,indexs)" class="disp mag_b_5"
                  :class="items.isTrue?'xz':'bxz'"
                  style="padding: 2px 5px;border-radius: 5px;margin-right: 10px"
                  v-for="(items,indexs) in item.cpList" :key="indexs">{{items.name}}
            </view>
          </view>
          <!--        评价主体-->
          <view class="bor_10 pad_10" style="background-color: #f5f5f5">
            <view class="wz_qhui">
              <up-textarea
                  placeholder="分享多方面的商品体验, 可以帮助更多想买的用户哦~"
                  :maxlength="150"
                  :autoHeight="true"
                  :count="true"
                  v-model="item.comment"
                  customStyle="background-color: #f5f5f5;border:none"
              ></up-textarea></view>
            <view class="mag_t-20 pad_10_0 wh_f">
              <view>
                <view @click="adduserImg(index)" class="jz_flex bor_10" style="border: 2px dashed #c6c6c5;width: 80px;height: 80px">
                  <view>
                    <view class="wz_jz">
                      <img src="../img/zp.png" style="width: 30px;height: 30px"/></view>
                    <view class="fz_12 wz_hui">添加照片</view>
                  </view>
                </view>
              </view>
              <view class="fz_12 db_flex pad_l-20 wz_qhui">
                <view>上传图片/视频 (最多6张) 更能帮助他人了解商品</view>
              </view>
            </view>
            <view class="ddisp">
              <view class="boxs xd" v-for="(img,imgindex) in item.images" style="width: 25%;padding:2px 4px">
                <view class="img_zfx ">
                  <image :src="img" :key="imgindex"></image>
                </view>
                <img @click="delImgs(index,imgindex)" class="jd" src="../img/xh.png" style="right: -2px;top: -2px;width: 22px;height: 22px;z-index: 1"/></view>
            </view>
          </view>
        </view>
      </view>

      <!--    底部结算-->
      <view style="height: 70px"></view>
      <view class="pm ba_white box_yy jz_flex" style="width: 100%;height:60px;left: 0;bottom: 0">
        <view @click="add" class="wh_9 bor_25 he_7 jz_flex wz_white fz_16" style="background-color: #3a9e5f">
          <text>评价任意商品即可提交</text>
        </view>
      </view>
    </view>
    <view v-if="status === 2" class="whe_max boxs xd boxs" style="padding:20px 20px;">
      <view class="xyy wz_jz pad_10_0 bor_10">
        <view>
          <img src="../img/pjcg.png" style="width: 80px;height: 80px"/>
        </view>
        <view class="fz_26 em pad_10_0">评价成功!</view>
        <view  @click="addPage('/pages/index/index')" class="wz_lv">去首页逛逛 »</view>
      </view>
      <view class="fz_16" style="padding: 15px 0 0">您还可以继续评价以下订单~</view>
      <view v-if="orderlist.length>0">
        <view v-for="(item,index) in orderlist" :key="index"
              class="pad_5_10 xyy bor_10 mag_t-15">
          <view class="wh_f pad_5_0" style="border-bottom: 1px solid #f0f2ee">
            <view class="flex_1">
              <image v-if="item.get_type_str==='统一配送'" class="centerdq" src="../../static/icon/typs.png" style="width: 24px;height: 24px"></image>
              <image v-if="item.get_type_str==='到站自提'" class="centerdq" src="../../static/icon/ddzt.png" style="width: 24px;height: 24px"></image>
              <image v-if="item.get_type_str==='送货上门'" class="centerdq" src="../../static/icon/shsm.png" style="width: 24px;height: 24px"></image>
              <text class="centerdq fz_16 mag_l-5 wz_black em">{{ item.get_type_str }}</text>
            </view>
            <view class="centerdq fz_16 wz_qhui">{{ item.order_status_str }}</view>
          </view>
          <view class="ddisp bhh ccgl pad_10_0" style="border-bottom: 1px solid #f0f2ee">
            <view style="width: 20%">
              <view class="disp mag_r-10" v-for="(items,indexs) in item.goods" :key="indexs">
                <image :src="items.goods_image"
                       style="width: 60px;height: 60px;border-radius: 10px"></image>
              </view>
            </view>
          </view>
          <view class="wh_f fz_14 pad_t-10 wz_hui">
            <view class="flex_1">
              {{ item.updated_at }}
            </view>
            <view>
              共计{{ item.goods.length }}件商品
            </view>
          </view>
          <view class="fz_14 wz_rigdq" style="padding: 15px 0 5px">
            <!--        <text @click.stop="AgainOrder(item)" class="bor_5" style="border: 1px solid #dfe1dd;padding: 12rpx 24rpx">再来一单</text>-->
            <text v-if="item.order_status == 4" @click.stop="appraise(item.id)" class="bor_5 wz_white mag_l-15" style="padding: 12rpx 24rpx;background-color: #3a9e5f">评价</text>
          </view>
          <view class="wz_rigdq mag_t-10 fz_12" style="padding-bottom: 5px">
            <view v-if="item.order_status === 0">
              <text class="fz_16 em wz_black centerdq">待支付</text>
            </view>
            <view v-if="item.order_status !== 0 && item.order_status !== 6">
              <text class="centerdq fz_14">实付款:</text>
              <text class="fz_18 em wz_black centerdq">
                ¥{{ item.pay_price }}
              </text>
            </view>
          </view>
        </view>
      </view>
      <view v-if="orderlist.length<0" class="jz_flex" style="height: 50%">
        <view class="wz_jz">
          <image style="width: 200px;height: 130px" src="https://xdjzapi.towngo.cn/uploads/images/wx/202507/08/xcx_1751945016_KEXbwbZngN.png"></image>
          <view class="mag_t-20 wz_qhui">暂时没有可评价的订单</view>
        </view>
      </view>
      <view class="jd_bot jz_flex wz_qhui fz_12" style="height: 70px">
        ----- 没有更多订单了 -----
      </view>
    </view>
  </view>
</template>
<script>
import {
  allGood,
  Appstore,
  getGoodsReviews,
  getReviewableItems,
  getShopGoodsInfo,
  orderDetail, shopOrderList,
  userCenter
} from "../../Api/shop";

export default {
  name: "index",
  data(){
    return{
      order_id:null,
      list:[],
      bq:[
          '日期新鲜',
          '包装精美',
          '味道不错',
          '价格合适',
          '性价比高',
          '配送及时',
          '经常回购',
      ],
      bqList:[
          {name:'日期新鲜',isTrue:false},
          {name:'包装精美',isTrue:false},
          {name:'味道不错',isTrue:false},
          {name:'价格合适',isTrue:false},
          {name:'性价比高',isTrue:false},
          {name:'配送及时',isTrue:false},
          {name:'经常回购',isTrue:false}
      ],
      hp:[
          '日期新鲜',
          '包装精美',
          '味道不错',
          '价格合适',
          '性价比高',
          '配送及时',
          '经常回购'
      ],
      cpList:[
          {name:'变质/变色/异味',isTrue:false},
          {name:'外部发霉/腐烂',isTrue:false},
          {name:'商品压伤/裂口',isTrue:false},
          {name:'失水/发蔫',isTrue:false},
          {name:'实物与描述不符',isTrue:false},
          {name:'外部斑点/疤痕',isTrue:false},
          {name:'重量不足',isTrue:false},
          {name:'其他',isTrue:false}
      ],
      cp:[
          '变质/变色/异味',
          '外部发霉/腐烂',
          '商品压伤/裂口',
          '失水/发蔫',
          '实物与描述不符',
          '外部斑点/疤痕',
          '重量不足',
          '其他'
      ],
      status:1,
      orderlist:[]
    }
  },
  onLoad(options){
    this.order_id = options.id
    let data;
    getReviewableItems({
      order_id:options.id
    }).then(res=>{
      data = res.data.goods.map(item=>({
        ...item,
        ishp:true,
        isTrue:true
      }))
      this.list = data
      // this.list = res.data.goods
    })
  },
  onShow(){
    shopOrderList({
      order_status:4,
      page:1,
      per_page:2
    }).then(res=>{
      this.orderlist = res.data.data
    })  },
  methods:{
    // 去评价
    appraise(e){
      uni.navigateTo({
        url:'/shophome/appraise/index?id='+e
      })
    },
    //查询可评价的订单
    getOrderList(){
      shopOrderList({
        order_status:4,
        page:1,
        per_page:2
      }).then(res=>{
        this.status = 2
        this.orderlist = res.data.data
        console.log('订单列表',res.data)
      })
    },
    //消息提示
    showToast(msg, type = "default") {
      uni.showToast({
        title: msg,
        icon: "none", // 图标类型，可选值：success, none
        duration: 2000 // 显示时间，单位毫秒
      });
    },
    // 跳页面
    addPage(e){
      uni.switchTab({
        url:e
      });
    },
    // 提交评价
    add(){
      let tags = '';
      this.list.forEach((item,index)=>{
        console.log(item)
        console.log(this.list[0].ishp,this.list[0].iscp)
        if(item.ishp){
          item.hpList.map(item=>{
            if(item.isTrue){
              tags+=item.name+"|"
            }
          })
        }else{
          item.cpList.map(item=>{
            if(item.isTrue){
              tags+=item.name+"|"
            }
          })
        }
        let data = {
          order_id:this.order_id,
          order_goods_id:item.id,
          rating:item.ishp?1:5,
          comment:item.comment,
          images:item.images,
          tags:tags,
        }
        Appstore(data).then(res=>{
          if(res.success){
            this.getOrderList()
          }
        })
      })
    },
    //删除图片
    delImgs(i,ind){
      this.list[i].images.splice(ind,1)
    },
    // 一键好评
    allHp(){
      allGood({order_id:this.order_id}).then(res=>{
        if(res.success){
          this.getOrderList()
        }
      })
    },
    addhp(e,index){
      console.log(e,index)
      switch (e) {
        case 1:
          // this.list[index].ishp = false
          break;
        case 2:
          // this.list[index].iscp = false
          break;
        // 打开好评
        case 3:
          this.list[index].ishp = true
          this.list[index].iscp = false
          break;
        // 打开差评
        case 4:
          this.list[index].iscp = true
          this.list[index].ishp = false
          break;
      }
    },
    //选择图片
    adduserImg(index){
      if(this.list[index].images){
        this.upImg(index)
      }else{
        this.list[index].images = []
        this.upImg(index)
      }
    },
    upImg(index){
      let count;
      if(this.list[index].images.length < 6){
        count = 6 - this.list[index].images.length
        console.log("还能上传张",count)
        uni.showModal({
          title: '提示',
          content: '上传图片',
          success: (m) => {
            if (m.confirm) {
              uni.chooseImage({
                count: count,
                sizeType: ['compressed'],
                success: (img) => {
                  uni.uploadFile({
                    url: 'https://xdjzapi.towngo.cn/api/v1/image/uploadImages',
                    filePath: img.tempFilePaths[0],
                    name: 'file',
                    formData: {
                      'folder': 'xcx'
                    },
                    header: {
                      'Authorization': 'Bearer ' + uni.getStorageSync('userToken')
                    },
                    success: (res) => {
                      let data = JSON.parse((res.data))
                      if(this.list[index].images){
                        this.list[index].images.push(data.data)
                      }else{
                        this.list[index].images = []
                        this.list[index].images.push(data.data)
                      }
                    }
                  })
                }
              })
            }
          }
        })
      }else{
        console.log("不能上传了",this.list[index].images.length)
      }
    },
    // 展开
    addZk(e){
      this.list[e].isTrue = true
    },
    // 收起
    addSq(e){
      this.list[e].isTrue = false
    },
    // 点击标签
    addbq(id,i,ind){
      if(id === 1){
        this.list[i].hpList[ind].isTrue =! this.list[i].hpList[ind].isTrue
      }else{
        this.list[i].cpList[ind].isTrue =! this.list[i].hpList[ind].isTrue
      }
    },
    // 点击标签
    addbq_old(item,i){
      // 判断有没有选中的标签数据 有
      if(this.list[i].bq){
        // 判断此次点击的标签是否已存在 有
        if(this.list[i].bq.includes(item)){
          //找到已存在的下标 那么删除它
          this.list[i].bq.find((items,index)=>{
            if(item == items){
              this.list[i].bq.splice(index,1)
            }
          })
          //没有 正常添加
        }else{
          this.list[i].bq.push(item)
        }
      }else{
        // 没有 创建数组 赋值
        this.list[i].bq = []
        this.list[i].bq.push(item)
      }
    }
  }
}
</script>
<style scoped lang="scss">
::v-deep.u-textarea__count{
  background-color: #f5f5f5!important;
}
.xz{
  color: #3a9e5f;
  border: 1px solid #3a9e5f;
  background-color: #d5f0dd;
}
.bxz{
  color: #828282;
  border: 1px solid #c3c3c3;
  background-color: #ffffff;
}
</style>
